<template>
  <div class="home">
    <div class="content">
       <h4>登录账号</h4>
       <p>虾米 - 严选商城欢迎您</p>
       <div :class="`input_ct ${rePhone==0?'':rePhone==1?'success':'err'}`">
         <input type="text" v-model="mobile" placeholder="手机号" @blur="phoneFtn">
         <span style="color:red" v-if="rePhone==2">必填</span>
       </div>
       <div :class="`input_ct ${rePwd==0?'':rePwd==1?'success':'err'}`">
         <input type="text" v-model="pwd" placeholder="密码" @blur="pwdFtn">
         <span style="color:red" v-if="rePwd==2">必填</span>
       </div>
       <button class="login_btn" @click="login">登录</button>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { reactive, toRefs } from 'vue';
import api from '../api/index';
export default {
  name: 'Home',
  components: {

  },
  setup(props) {
    const data = reactive({
       rePhone: 0, // 0 代表没有触摸过 1，代表成功 2，失败
       rePwd: 0,
       mobile: '' , // 手机号
       pwd: '', // 密码
    })
    const phoneFtn = () =>{ // 手机号的正则验证
       let roule = /^1[3-9][0-9]{9}$/; // test
       data.rePhone = roule.test(data.mobile)?1:2
      // if (!roule.test(data.mobile)){
      //    alert('手机号错误！')
      // }
    }

    const pwdFtn = () => {
      //  data.rePwd = data.pwd?1:2
      let roule = /^[A-Za-z0-9_\.]{6,18}$/;
      data.rePwd = roule.test(data.pwd)?1:2;
    }

    const login = () => {
      if (data.rePhone == 2 || data.rePwd == 2 ){
        return
      }
      // api.post(`https://api.it120.cc/small4/user/m/login?deviceId=007&deviceName=monkey&mobile=${data.mobile}&pwd=${data.pwd}`).then(res => {
      //   console.log(res);
      // })
    }
    return {
      ...toRefs(data),
      phoneFtn,
      pwdFtn,
      login
    }
  }
}
</script>
<style lang="scss" scoped>
  .home{
    height: 100%;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    .content{
      border: 1px solid #f5f5f5;
      padding: 0 30px;
      box-sizing: border-box;
      h4{
        font-size: 26px;
        margin-top: 30px;
      }
      p{
        margin: 20px 0;
        color: #909090;
        font-size: 15px;
      }
      .input_ct{
        display: flex;
        height: 50px;
        border: 1px solid transparent;
        border-radius: 5px;
        background: #f5f5f5;
        align-items: center;
        margin-top: 15px;
        padding: 0 10px;
        box-sizing: border-box;
        span{
          font-size: 12px;
        }
        input{
          border: none;
          background: transparent;
          height: 100%;
          outline: none;
          flex: 1;
        }
      }
      .success{
        border-color: rgb(56, 219, 36);
        background: rgb(225, 255, 223);
      }
      .err{
        border-color: rgb(225, 44, 30);
        background: rgb(255, 233, 228);
      }
      .login_btn{
        border: none;
        width: 210px;
        height: 50px;
        margin: 20px auto;
        display: block;
        border-radius: 5px;
        background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
        color:#fff;
      }
    }
  }
</style>
